<template>
	<div class="bo"><br><br><br><br>
		<div>
			<el-card style="width: 500px;height: 350px;margin: 0px auto;">
				<el-form :model="userLoginForm" :rules="userRules" ref="userLoginRef" label-width="100px"
					class="login_form">
					<h2 style="text-align: center;">考生登录</h2><br>	<br>
					<el-form-item label="用户名" prop="userName">
						<el-input prefix-icon="el-icon-user" placeholder="请输入账号" v-model="userLoginForm.userName">
						</el-input>
					</el-form-item>
					<el-form-item label="密码" prop="userPwd">
						<el-input prefix-icon="el-icon-lock" placeholder="请输入密码" type="password"
							v-model="userLoginForm.userPwd"></el-input>
					</el-form-item>

					</br>
					<el-button style="margin-top: 10px;margin-left: 150px;" type="primary" @click="userLogin">登录
					</el-button>
					<el-button type="infor" @click="reset">重置</el-button>
					<el-link type="warning" @click="toregister" style="float: right; margin-top: 30px;">注册账号</el-link>
				</el-form>

			</el-card>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				userLoginForm: {
					userName: '',
					userPwd: ''
				},
				userRules: {
					userName: [{
							required: true,
							message: '请输入用户名',
							trigger: 'blur'
						}
					],
				},
				userInfo: '',
			}
		},
		methods: {
			reset() {
				this.$refs.userLoginRef.resetFields();
			},
			userLogin() {
				this.$refs.userLoginRef.validate(async (val) => {
					if (val) {
						var p = new URLSearchParams;
						p.append("username", this.userLoginForm.userName);
						p.append("password", this.userLoginForm.userPwd);
						var res = await this.$http.post("login", p);
						// console.log(this.radio)
						if (res.data.code == '400') {
							this.$message.error(res.data.message);
						} else {
							// 登录成功后，把后端等用户的token放入到本地中							
							// console.log(res.data.data.name)
							this.userInfo = res.data.data;
							window.sessionStorage.setItem("name", res.data.data.name);
							window.sessionStorage.setItem("username", res.data.data.username);
							window.sessionStorage.setItem("roleId", res.data.data.roleId);
							window.sessionStorage.setItem("id", res.data.data.id);
							/*判断考生还是管理员*/
							if (this.userInfo.roleId == 1) {
								/*考生调转到主页*/
								this.$router.push('/');
							}
							if (this.userInfo.roleId == 2) {
								/*管理员跳转到后台*/
								this.$router.push('/homeHt');
							}
						}
					} else { // 错误
						// $message : element的提示信息
						this.$message.error("数据不合法，请检查！")
					}
				});
			},
			toregister() {
				this.$router.push("/register")
			}
		}
	}
</script>

<style>

</style>
